<template>
  <div>
      <div>
        <div class="input-header">
          <div >
            <el-input 
                placeholder="请输入员工们进行搜索..."   
                style="width:300px;margin-right:10px;" 
                v-model="empName" 
                :disabled = "showAdvanceSearchVisible"
                @keydown.enter.native="initEmps()"
                clearable 
                @clear="initEmps()">
                </el-input>
            <el-button type="primary" icon="el-icon-search" @click="initEmps()" :disabled = "showAdvanceSearchVisible">搜索</el-button>
            <el-button type="primary" @click="searchGaoJi()">
              <i :class="showAdvanceSearchVisible?'fa fa-angle-double-up':'fa fa-angle-double-down'" aria-hidden="true" ></i>高级搜索</el-button>
          </div>
          <div>
            <el-upload
              style="display: inline-block ; margin-right: 10px;"
              :before-upload="beforeUpload"
              :on-success="onSuccess"
              :on-error="onError"
              :disabled="importDateBtnDisabled"
              :headers="headers"
              action="/employee/basic/import"
              :show-file-list = "false"
              >
              <el-button type="success" :icon="importDateBtnIcon" :disabled="importDateBtnDisabled">
                {{importDateBtnText}}
              </el-button>
            </el-upload>
            
            <el-button type="success" @click="exportDate()" icon="el-icon-download">
              导出数据
            </el-button>
            <el-button type="primary" icon="el-icon-plus" @click="showEmpDialog()">
                添加员工
            </el-button>
          </div>
        </div>
      </div>
      <transition name="slide-fade">
        <div v-show="showAdvanceSearchVisible" style="border: 1px solid #409eff;border-radius: 5px;box-sizing: border-box;
          padding: 5px;margin: 10px 0px">
            <el-row>
              <el-col :span="5">
                政治面貌:
                <el-select v-model="searchEmp.politicId" placeholder="政治面貌" size="mini" style="width: 130px">
                      <el-option
                        v-for="item in politicsStatus"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
              </el-col>
              <el-col :span="4">
                民族:
                <el-select v-model="searchEmp.nationId" placeholder="民族" size="mini" style="width: 150px">
                      <el-option
                        v-for="item in nations"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
              </el-col>
              <el-col :span="4">
                职位:
                  <el-select v-model="searchEmp.posId" placeholder="职位" size="mini" style="width: 150px">
                      <el-option
                        v-for="item in positions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>            
              </el-col>
              <el-col :span="4">
                职称:
                    <el-select v-model="searchEmp.jobLevelId" placeholder="职称" size="mini" style="width: 150px">
                      <el-option
                        v-for="item in jobLevels"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
              </el-col>
              <el-col :span="7">
                聘用形式:
                    <el-radio-group v-model="searchEmp.engageForm" style="margin-top: 3px">
                      <el-radio label="劳动合同">劳动合同</el-radio>
                      <el-radio label="劳务合同">劳务合同</el-radio>
                    </el-radio-group>
              </el-col>
            </el-row>
            <el-row style="margin-top:10px">
              <el-col :span="5" >
                所属部门:
                <el-popover
                        placement="bottom"
                        title="请选择部门"
                        width="230"
                        trigger="manual"
                        v-model="visible1">
                        <el-tree :data="departments" :props="defaultProps" default-expand-all @node-click="searchNodeClick"></el-tree>
                        <div slot="reference" 
                          style="width: 130px;display: inline-flex; border: 1px solid #dedede;height: 24px;margin-bottom: 0px;
                              border-radius: 5px;cursor: pointer;font-size: 12px; padding-left: 14px;align-items: center;box-sizing: border-box" @click="showSearchDepView()">
                              {{inputNameDepartment1}}</div>
                      </el-popover>
              </el-col>
              <el-col :span="10">
                入职日期:
                <el-date-picker
                  v-model="searchEmp.beginDateScope"
                  size="mini"
                  type="daterange"
                  unlink-panels
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-col>
              <el-col :span="5" :offset="4">
                <el-button size="mini" @click="cancelSearchEmp()">取消</el-button>
                <el-button size="mini" type="primary" icon="el-icon-search" @click="initEmps()">搜索</el-button>
              </el-col>
            </el-row>
        </div>
      </transition>
      <div style="margin-top: 10px">
        <el-table 
          :data="emps"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          stripe
          border
          style="width:100%;">
          <el-table-column
            type="selection"
            width="55px">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            align="left"
            fixed
            width="90">
          </el-table-column>
          <el-table-column
            prop="workId"
            label="工号"
            align="left"
            width="90">
          </el-table-column>
          <el-table-column
            prop="gender"
            label="性别"
            width="50">
          </el-table-column>
          <el-table-column
            prop="birthday"
            label="出生日期"
            align="left"
            width="100">
          </el-table-column>
          <el-table-column
            prop="idCard"
            label="身份证号码"
            align="left"
            width="180">
          </el-table-column>
          <el-table-column
            prop="wedlock"
            label="婚姻状况"
            width="70">
          </el-table-column>
          <el-table-column
            prop="tnation.name"
            label="民族"
            width="50">
          </el-table-column>
          <el-table-column
            prop="nativePlace"
            label="籍贯"
            width="80">
          </el-table-column>
          <el-table-column
            prop="tpoliticsStatus.name"
            label="政治面貌"
            width="110">
          </el-table-column>
          <el-table-column
            prop="email"
            label="电子邮件"
            align="left"
            width="200">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="电话号码"
            align="left"
            width="120">
          </el-table-column>
          <el-table-column
            prop="address"
            label="联系地址"
            align="left"
            width="290">
          </el-table-column>
          <el-table-column
            prop="tdepartment.name"
            label="所属部门"
            align="left"
            width="100">
          </el-table-column>
          <el-table-column
            prop="tposition.name"
            label="职位"
            width="100">
          </el-table-column>
          <el-table-column
            prop="tjobLevel.name"
            label="职称"
            width="100">
          </el-table-column>
          <el-table-column
            prop="engageForm"
            label="聘用形式"
            align="left"
            width="100">
          </el-table-column>
          <el-table-column
            prop="tiptopDegree"
            label="最高学历"
            width="80">
          </el-table-column>
          <el-table-column
            prop="school"
            label="毕业院校"
            align="left"
            width="150">
          </el-table-column>
          <el-table-column
            prop="specialty"
            label="专业"
            align="left"
            width="150">
          </el-table-column>
          <el-table-column
            prop="workState"
            label="在职状态"
            align="left"
            width="70">
          </el-table-column>
          <el-table-column
            prop="beginDate"
            label="入职日期"
            align="left"
            width="100">
          </el-table-column>
          <el-table-column
            prop="conversionTime"
            label="转正日期"
            align="left"
            width="100">
          </el-table-column>
          <el-table-column
            prop="beginContract"
            label="合同起始日期"
            align="left"
            width="100">
          </el-table-column>
          <el-table-column
            prop="endContract"
            label="合同截止日期"
            align="left"
            width="100">
          </el-table-column>
          <el-table-column
            label="合同期限"
            align="left"
            width="100">
            <template slot-scope="scope">
              <el-tag>{{scope.row.contractTerm}}</el-tag>年
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="200"
            fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" style="padding: 3px" @click="showEmpDialogEdit(scope.row)">编辑</el-button>
              <el-button type="primary" size="mini" style="padding: 3px">查看高级资料</el-button>
              <el-button type="primary" size="danger" style="padding: 3px" @click="deleteEmp(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="display: flex;justify-content: flex-end;margin-top: 8px">
            <el-pagination
              background
              @current-change="currentChange"
              @size-change="sizeChange"
              layout="sizes,prev, pager, next, jumper, ->, total"
              :total="total">
            </el-pagination>
          </div>
      </div>
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="65%">
        <div>
          <el-form :model="emp" :rules="rules" ref="empForm">
            <el-row>
              <el-col :span="6">
                <el-form-item label="姓名：" prop="name">
                  <el-input v-model="emp.name" placeholder="请输入员工姓名" size="mini" style="width: 150px" prefix-icon="el-icon-edit"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="性别：" prop="gender">
                  <el-radio-group v-model="emp.gender" style="margin-top: 12px">
                    <el-radio label="男">男</el-radio>
                    <el-radio label="女">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="出生日期：" prop="birthday">
                  <el-date-picker
                    v-model="emp.birthday"
                    size="mini"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                    style="width: 150px">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="政治面貌：" prop="politicId">
                  <el-select v-model="emp.politicId" placeholder="政治面貌" size="mini" style="width: 200px">
                    <el-option
                      v-for="item in politicsStatus"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="民族：" prop="nationId">
                   <el-select v-model="emp.nationId" placeholder="民族" size="mini" style="width: 150px">
                    <el-option
                      v-for="item in nations"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="籍贯：" prop="nativePlace">
                  <el-input v-model="emp.nativePlace" placeholder="请输入籍贯 " size="mini" style="width: 150px" prefix-icon="el-icon-edit"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="电子邮箱：" prop="email">
                  <el-input v-model="emp.email" placeholder="请输入电子邮箱" size="mini" style="width: 150px" prefix-icon="el-icon-message"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="联系地址：" prop="address">
                  <el-input v-model="emp.address" placeholder="请输入地址" size="mini" style="width: 200px" prefix-icon="el-icon-edit"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="职位：" prop="posId">
                   <el-select v-model="emp.posId" placeholder="职位" size="mini" style="width: 150px">
                    <el-option
                      v-for="item in positions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="职称：" prop="jobLevelId">
                  <el-select v-model="emp.jobLevelId" placeholder="职称" size="mini" style="width: 150px">
                    <el-option
                      v-for="item in jobLevels"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="所属部门：" prop="departmentId">
                    <el-popover
                      placement="bottom"
                      title="请选择部门"
                      width="230"
                      trigger="manual"
                      v-model="visible">
                      <el-tree :data="departments" :props="defaultProps" default-expand-all @node-click="handleNodeClick"></el-tree>
                      <div slot="reference" 
                        style="width: 150px;display: inline-flex; border: 1px solid #dedede;height: 25px;
                            border-radius: 5px;cursor: pointer;font-size: 12px; padding-left: 14px;align-items: center;box-sizing: border-box" @click="showDepView()">
                            {{inputNameDepartment}}</div>
                    </el-popover>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="电话号码：" prop="phone">
                  <el-input v-model="emp.phone" placeholder="请输入电话号码" size="mini" style="width: 200px" prefix-icon="el-icon-phone"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="工号：" prop="workId">
                   <el-input v-model="emp.workId" placeholder="请输入工号" size="mini" style="width: 150px" prefix-icon="el-icon-edit" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="学历：" prop="tiptopDegree">
                  <el-select v-model="emp.tiptopDegree" placeholder="学历" size="mini" style="width: 150px">
                    <el-option
                      v-for="item in tiptopDegrees"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="毕业院校：" prop="school">
                  <el-input v-model="emp.school" placeholder="请输入毕业院校" size="mini" style="width: 150px" prefix-icon="el-icon-message"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="专业名称：" prop="specialty">
                  <el-input v-model="emp.specialty" placeholder="请输入专业名称" size="mini" style="width: 200px" prefix-icon="el-icon-phone"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="入职日期：" prop="beginDate">
                   <el-date-picker
                    v-model="emp.beginDate"
                    size="mini"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="入职日期"
                    style="width: 125px">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="转正日期：" prop="conversionTime">
                   <el-date-picker
                    v-model="emp.conversionTime"
                    size="mini"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="转正日期"
                    style="width: 125px">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="合同起始日期：" prop="beginContract">
                   <el-date-picker
                    v-model="emp.beginContract"
                    size="mini"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="合同起始日期"
                    style="width: 130px">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="合同截止日期：" prop="endContract">
                  <el-date-picker
                    v-model="emp.endContract"
                    size="mini"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="合同截止日期"
                    style="width: 170px">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
             <el-row>
              <el-col :span="8">
                <el-form-item label="身份证号码：" prop="idCard">
                   <el-input v-model="emp.idCard" placeholder="请输入身份证号码" size="mini" style="width: 180px" prefix-icon="el-icon-edit"></el-input>
                </el-form-item>
              </el-col>
              
              <el-col :span="8">
                <el-form-item label="聘用形式：" prop="engageForm">
                  <el-radio-group v-model="emp.engageForm" style="margin-top: 12px">
                    <el-radio label="劳动合同">劳动合同</el-radio>
                    <el-radio label="劳务合同">劳务合同</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="婚姻状况：" prop="wedlock">
                  <el-radio-group v-model="emp.wedlock" style="margin-top: 12px">
                    <el-radio label="已婚">已婚</el-radio>
                    <el-radio label="未婚">未婚</el-radio>
                    <el-radio label="离异">离异</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelEmp()">取 消</el-button>
          <el-button type="primary" @click="addEmp()">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
export default {
    name: "empBasic",
    data(){
      return{
        searchEmp:{
          politicId: null,
          nationId: null,
          posId: null,
          jobLevelId: null,
          engageForm: '',
          departmentId: null,
          beginDateScope: [],
        },
        showAdvanceSearchVisible: false,
        headers:{
          Authorization:window.sessionStorage.getItem("tokenStr")
        },
        importDateBtnDisabled: false,
        importDateBtnText: '导入数据',
        importDateBtnIcon: 'el-icon-upload2',
        title: '',
        visible1: false,
        visible: false,
        emps:[],
        loading:false,
        total: 0,
        currentPage: 1,
        pageSize: 10,
        empName:"",
        dialogVisible: false,
        emp:{
          id:null,
          name: '',
          gender: '',
          birthday: '',
          idCard: '',
          wedlock: '',
          nationId: null,
          nativePlace: '',
          politicId: null,
          email: '',
          phone: '',
          address: '',
          departmentId: null,
          jobLevelId: null,
          posId: null,
          engageForm: '',
          tiptopDegree: '',
          specialty: '',
          school: '',
          beginDate: '',
          workState: '在职',
          workId: '',
          contractTerm: null,
          conversionTime: '',
          notWorkDate: null,
          beginContract: '',
          endContract: '',
          workAge: null,
          salaryId: null,
        },
        rules:{
            name: [{required: true, message: '请输入员工姓名', trigger: 'blur'}],
            gender: [{required: true, message: '请输入员工性别', trigger: 'blur'}],
            birthday: [{required: true, message: '请输入出生日期', trigger: 'blur'}],
            idCard: [{required: true, message: '请输入身份证号码', trigger: 'blur'},
                    {pattern: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
                        message: '身份证号码格式不正确', trigger: 'blur'}],
            wedlock: [{required: true, message: '请输入婚姻状况', trigger: 'blur'}],
            nationId: [{required: true, message: '请输入民族', trigger: 'blur'}],
            nativePlace: [{required: true, message: '请输入籍贯', trigger: 'blur'}],
            politicId: [{required: true, message: '请输入政治面貌', trigger: 'blur'}],
            email: [{required: true, message: '请输入邮箱地址', trigger: 'blur'},
                    {type: 'email', message: '邮箱地址格式不正确', trigger: 'blur'}],
            phone: [{required: true, message: '请输入电话号码', trigger: 'blur'}],
            address: [{required: true, message: '请输入员工地址', trigger: 'blur'}],
            departmentId: [{required: true, message: '请输入部门名称', trigger: 'blur'}],
            jobLevelId: [{required: true, message: '请输入职称', trigger: 'blur'}],
            posId: [{required: true, message: '请输入职位', trigger: 'blur'}],
            engageForm: [{required: true, message: '请输入聘用形式', trigger: 'blur'}],
            tiptopDegree: [{required: true, message: '请输入学历', trigger: 'blur'}],
            specialty: [{required: true, message: '请输入专业', trigger: 'blur'}],
            school: [{required: true, message: '请输入毕业院校', trigger: 'blur'}],
            beginDate: [{required: true, message: '请输入入职日期', trigger: 'blur'}],
            workState: [{required: true, message: '请输入工作状态', trigger: 'blur'}],
            workId: [{required: true, message: '请输入工号', trigger: 'blur'}],
            contractTerm: [{required: true, message: '请输入合同期限', trigger: 'blur'}],
            conversionTime: [{required: true, message: '请输入转正日期', trigger: 'blur'}],
            notWorkDate: [{required: true, message: '请输入离职日期', trigger: 'blur'}],
            beginContract: [{required: true, message: '请输入合同起始日期', trigger: 'blur'}],
            endContract: [{required: true, message: '请输入合同结束日期', trigger: 'blur'}],
        },
        nations:[],
        politicsStatus:[],
        jobLevels:[],
        positions:[],
        tiptopDegrees: ['博士','硕士','本科','大专','高中','初中','小学','其他'],
        maxWorkId: null,
        departments:[],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        inputNameDepartment:'',
        inputNameDepartment1: '',
      }
    },
    created(){
      this.initEmps();
      this.initDate();
      this.initPositions();
    },
    methods:{
      searchGaoJi(){
          this.showAdvanceSearchVisible = !this.showAdvanceSearchVisible;
          this.cancelSearchEmp();
      },
      cancelSearchEmp(){
        this.searchEmp = {
          politicId: null,
          nationId: null,
          posId: null,
          jobLevelId: null,
          engageForm: '',
          departmentId: null,
          beginDateScope: [],
        }
        this.inputNameDepartment1 = ''
      },
      onSuccess(){
        this.importDateBtnText = "导入数据",
        this.importDateBtnType = "el-icon-upload2";
        this.importDateBtnDisabled = false;
        this.initEmps();
      },
      onError(){
        this.importDateBtnText = "导入数据",
        this.importDateBtnType = "el-icon-upload2";
        this.importDateBtnDisabled = false;
      },
      beforeUpload(){
        this.importDateBtnText = "正在导入",
        this.importDateBtnType = "el-icon-loading"
        this.importDateBtnDisabled = true;
      },
      exportDate(){
        this.$downloadRequest('/employee/basic/export');
      },
      showEmpDialogEdit(data){
        this.title = "编辑员工";
        this.emp = data;
        this.inputNameDepartment = data.tdepartment.name;
        this.dialogVisible = true;
      },
      deleteEmp(data){
        this.$confirm(
            "此操作将永久删除" + data.name + ", 是否继续?",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
            .then(() => {
              this.$deletefn("/employee/basic/"+data.id).then(res => {
                if(res){
                  if(this.emps.length ==1){
                    this.currentPage = this.currentPage - 1;
                  }
                  this.initEmps();
                }
              })
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
      },
      cancelEmp(){
        this.emp ={
            id:null,
            name: '',
            gender: '',
            birthday: '',
            idCard: '',
            wedlock: '',
            nationId: null,
            nativePlace: '',
            politicId: '',
            email: '',
            phone: '',
            address: '',
            departmentId: null,
            jobLevelId: null,
            posId: null,
            engageForm: '',
            tiptopDegree: '',
            tiptopDegree: '',
            specialty: '',
            school: '',
            beginDate: '',
            workState: '在职',
            workId: '',
            contractTerm: null,
            conversionTime: '',
            notWorkDate: null,
            beginContract: '',
            endContract: '',
            workAge: null,
            salaryId: null,
        },
        this.inputNameDepartment = '';
        this.dialogVisible = false;
      },
      addEmp(){
        if(this.emp.id){
          this.$refs.empForm.validate((valid) => {
            if(valid){
              this.$put('/employee/basic/',this.emp).then(res => {
                this.dialogVisible = false;
                this.initEmps();
              })
            }
        })
        }else{
          this.$refs.empForm.validate((valid) => {
            if(valid){
              this.$post('/employee/basic/',this.emp).then(res => {
                this.dialogVisible = false;
                this.initEmps();
              })
            }
          })
        }
        
      },
      searchNodeClick(data){
        this.searchEmp.departmentId = data.id;
        this.inputNameDepartment1 = data.name;
        this.visible1 = !this.visible1;
      },
      handleNodeClick(data){
        this.emp.departmentId = data.id;
        this.inputNameDepartment = data.name;
        this.visible = !this.visible;
      },
      showSearchDepView(){
        this.visible1 = !this.visible1;
      },
      showDepView(){
        this.visible = !this.visible;
      },
      getMaxWorkId(){
        this.$get('/employee/basic/workId').then(res => {
          if(res){
            this.emp.workId = res.data;
          }
        })
      },
      initPositions(){
        this.$get("/employee/basic/tPositions").then(res => {
            if(res){
              this.positions = res;
            }
          })
      },
      initDate(){
        if(!window.sessionStorage.getItem("nations")){
          this.$get("/employee/basic/tNations").then(res => {
            if(res){
              window.sessionStorage.setItem("nations", JSON.stringify(res));
              this.nations = res;
            }
          })
        }else {
          this.nations = JSON.parse(window.sessionStorage.getItem("nations"));
        }
        if(!window.sessionStorage.getItem("politicsStatus")){
          this.$get("/employee/basic/tPoliticsStatus").then(res => {
            if(res){
              window.sessionStorage.setItem("politicsStatus", JSON.stringify(res));
              this.politicsStatus = res;
            }
          })
        }else {
          this.politicsStatus = JSON.parse(window.sessionStorage.getItem("politicsStatus"));
        }
        if(!window.sessionStorage.getItem("jobLevels")){
          this.$get("/employee/basic/tJobLevels").then(res => {
            if(res){
              window.sessionStorage.setItem("jobLevels", JSON.stringify(res));
              this.jobLevels = res;
            }
          })
        }else {
          this.jobLevels = JSON.parse(window.sessionStorage.getItem("jobLevels"));
        }
        if(!window.sessionStorage.getItem("departments")){
          this.$get('/employee/basic/tDepartments').then(res => {
          if(res){
            this.departments = res;
          }
        })
        }else {
          this.departments = JSON.parse(window.sessionStorage.getItem("departments"));
        }
        
      },
      showEmpDialog(){
        this.title = '添加员工';
        this.getMaxWorkId();
        this.initPositions();
        this.inputNameDepartment = '';
        this.emp ={
            id:null,
            name: '',
            gender: '',
            birthday: '',
            idCard: '',
            wedlock: '',
            nationId: null,
            nativePlace: '',
            politicId: '',
            email: '',
            phone: '',
            address: '',
            departmentId: null,
            jobLevelId: null,
            posId: null,
            engageForm: '',
            tiptopDegree: '',
            tiptopDegree: '',
            specialty: '',
            school: '',
            beginDate: '',
            workState: '在职',
            workId: '',
            contractTerm: null,
            conversionTime: '',
            notWorkDate: null,
            beginContract: '',
            endContract: '',
            workAge: null,
            salaryId: null,
        },
        this.dialogVisible = true;
      },
      currentChange(currentPage){
        this.currentPage = currentPage;
        this.initEmps();
      },
      sizeChange(pageSize){
        this.pageSize = pageSize;
        this.initEmps();
      },
      initEmps(){
        this.loading = true;
        var url = "/employee/basic/?currentPage="+this.currentPage+"&pageSize="+this.pageSize;
        if(this.showAdvanceSearchVisible){
          if(this.searchEmp.politicId){
            url += "&politicId="+this.searchEmp.politicId;
          }
          if(this.searchEmp.nationId){
            url += "&nationId="+this.searchEmp.nationId;
          }
          if(this.searchEmp.posId){
            url += "&posId="+this.searchEmp.posId;
          }
          if(this.searchEmp.jobLevelId){
            url += "&jobLevelId="+this.searchEmp.jobLevelId;
          }
          if(this.searchEmp.engageForm){
            url += "&engageForm="+this.searchEmp.engageForm;
          }
          if(this.searchEmp.departmentId){
            url += "&departmentId="+this.searchEmp.departmentId;
          }
          if(this,this.searchEmp.beginDateScope){
            url += "&beginDateScope="+this.searchEmp.beginDateScope;
          }
        }else {
          if(this.empName != ''){
            url += "&name="+this.empName;
          }
        }
        this.$get(url).then(res=>{
          this.loading = false
          if(res){
            this.emps = res.list;
            this.total = res.total;
          }
        })
      },
    },
}
</script>

<style >
.input-header {
  display: flex;
  justify-content: space-between;
}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all .8s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>